<template>
  <div class="anwser-window">
    <!-- 文本域 -->
    <div class="scroll show-content">
      <textarea
        v-if="contentType === 'Text'"
        class="scroll show-content-textarea"
        ref="anwserText"
        id="textarea"
        maxlength="1000"
        autofocus
        :value="content"
        @input="setContent"
        @keydown.13.exact="enterSend"
        @keyup.ctrl.enter.exact="lineFeed"
      ></textarea>
      <!-- <p v-if="contentType === 'Text'" v-text="content"></p> -->
      <img v-else-if="contentType === 'Picture'" class="show-content-img" :src="content" alt="图片丢失" />
      <video v-else-if="contentType === 'Video'" class="show-content-video" :src="content" controls></video>
      <audio
        v-if="contentType === 'Voice' && /.mp3$/.test(content)"
        class="show-content-voice"
        :src="content"
        type="audio/mp3"
        controls
      ></audio>
      <span
        v-if="contentType === 'Voice' && !/.mp3$/.test(content)"
        class="show-content-file"
        v-text="content"
      ></span>
      <span
        v-else-if="contentType === 'File'"
        class="show-content-file"
        v-text="$options.filters.getFileName(content)"
      ></span>
    </div>

    <!-- 发送 -->
    <div class="opration-btn">
      <el-button
        icon="el-icon-mic"
        type="plant"
        size="small"
        @mousedown.native="handlerDown"
        @mouseup.native="handlerUp"
      >按住说话</el-button>
      <!-- @mouseleave.native="handlerLeave" -->
      <el-button class type="warning" size="small" @click="clearContent">清空</el-button>
      <el-button class type="primary" size="small" @click="talkToFriendTask">发送(Enter)</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      //   remark: '',
    }
  },
  computed: {
    ...mapGetters({
      remark: 'conversation/remark',
      content: 'conversation/content',
      contentType: 'conversation/contentType',
      currentFriends: 'conversation/currentFriends',
      currentWechat: 'conversation/currentWechat',
      currentWeChatId: 'conversation/currentWeChatId'
    }),
    currentFriend() {
      if (this.currentWeChatId && this.currentFriends[this.currentWeChatId]) {
        return this.currentFriends[this.currentWeChatId]
      }
      return {}
    }
  },
  methods: {
    // 发送消息
    talkToFriendTask() {
      // 未选择微信不能发送
      if (!this.currentWeChatId) {
        this.$message.warning('请先选中微信！')
        return
      }
      // 如果手机下线或者未登陆 不能发消息
      if (!this.currentWechat.IsOnline || !this.currentWechat.IsLogined) {
        this.$message.warning(`${this.currentWechat.WeChatNick} 不在线或者未登陆，不能给其发消息！`)
        return
      }
      // 未选择好友不能发送
      if (JSON.stringify(this.currentFriend) === '{}') {
        this.$message.warning('请先选择一个好友！')
        return
      }
      // 不能发送空的信息
      let cc = this.content.replace(/\s/gi, '')
      if (!cc) {
        this.$message.warning('请设置发送内容！')
        return
      }
      let content = {
        WeChatId: this.currentWeChatId, // 所属微信号
        FriendId: this.currentFriend.FriendId || this.currentFriend.UserName, // 发送给那个好友
        ContentType: this.contentType, // 发送消息类型 Text Picture Voice Video Link File NameCard
        Content: this.content, // 发送消息内容 文本，文件url，链接json，名片wxid
        Remark: this.remark, // 其他备注信息，群聊@别人
      }
      console.log(content)
      // 如果是发送到群里 并且被踢出群了 则不能发消息
      if (this.currentFriend.UserName) {
        if (this.currentFriend.MemberList && this.currentFriend.MemberList.indexOf(this.currentWeChatId) >= 0) {
          // 发送消息
          this.$store.dispatch('websocket/TalkToFriendTask', content)
          // 清空数据
          this.clearContent()
        } else {
          this.$message.warning('你已被踢出群聊,不能在该群发送消息!')
        }
      } else {
        // 发送消息
        this.$store.dispatch('websocket/TalkToFriendTask', content)
        // 清空数据
        this.clearContent()
      }
    },
    // ctrl + enter换行
    lineFeed() {
      let newContent = this.content + '\r\n'
      this.$store.commit('conversation/SET_CONTENT', newContent)
    },
    // enter发送消息
    enterSend(e) {
      e.preventDefault()
      this.talkToFriendTask()
    },
    setContent(e) {
      let newText = this.$refs.anwserText.value
      this.$store.commit('conversation/SET_CONTENT', newText)
    },
    // 清空message
    clearContent() {
      this.$store.commit('conversation/SET_CONTENT', '')
      this.$store.commit('conversation/SET_CONTENT_TYPE', 'Text')
    },
    handlerDown() {
      // 开始录音
    },
    handlerUp() {
      // 发送录音
    },
  },
  created() {
    // 节流 几秒只执行一次
    this.talkToFriendTask = this._.throttle(this.talkToFriendTask, 500)
  }
}
</script>


<style lang="scss" scoped>
.anwser-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: $bg-color-content-base;
  overflow: hidden;

  .show-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    border-radius: 5px;
    .show-content-textarea {
      flex: auto;
      resize: none;
      line-height: 20px;
      font-size: 16px;
      padding: 5px;
      border: #dcdfe6 solid 1px;
    }
    .show-content-video {
      max-height: 100%;
      margin: 2px auto 0px;
    }
    .show-content-img {
      object-fit: scale-down;
      margin: 0 auto;
      margin-top: 2px;
    }
    .show-content-voice {
      margin: auto;
    }
    .show-content-file {
      padding: 0 10px;
      width: 100%;
      max-width: 100%;
      line-height: 20px;
      text-align: center;
      align-self: center;
      word-break: break-all;
      //   white-space: pre-wrap;
    }
  }

  .opration-btn {
    align-self: flex-end;
    .el-button {
      width: 100px;
      margin: 5px;
    }
  }
}
</style>



